<template>
  <div class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
      <router-link
        v-for="(tag,index) in visitedViews"
        ref="tag"
        :class="isActive(tag) ? 'active' : ''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        :key="tag.path"
        tag="span"
        class="tags-view-item"
        @click.middle.native="closeSelectedTag(tag,index)"
      >
        {{ tag.meta.title }}
        <span
          class="el-icon-close"
          @click.prevent.stop="closeSelectedTag(tag,index)"
        />
      </router-link>
    </scroll-pane>
  </div>
</template>

<script>
import ScrollPane from "./ScrollPane";
export default {
  components: { ScrollPane },
  data() {
    return {
      selectedTag: {},
    };
  },
  computed: {
    visitedViews() {
      return this.$store.state.cachedViewsObj;
    },
  },
  watch: {
    $route: {
      handler(val) {
        let list = this.$store.state.cachedViews;
        let listObj = this.$store.state.cachedViewsObj;

        let out_router = ['setTemplate']//不缓存的页面

        if (val.name && !list.includes(val.name) && !out_router.includes(val.name)) {
          console.log(val)
          list.push(val.name);
          listObj.push(val);
          this.$store.commit("changeCachedViews", {
            list: list,
            listObj: listObj,
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    isActive(route) {
      return route.path === this.$route.path;
    },
    closeSelectedTag(view,index) {

      if(view.path == this.$route.path) {
        return false;
      }
      

      let list = this.$store.state.cachedViews;
      let listObj = this.$store.state.cachedViewsObj;

      list = list.filter(item => item !=view.name);
      listObj = listObj.filter(item => item.name !=view.name);

      this.$store.commit("changeCachedViews", {
        list: list,
        listObj: listObj,
      });

    },
  },
};
</script>

<style  lang="less" scoped>
.tags-view-container {
  height: 34px;
  width: 100%;
  background: #fff;
  .tags-view-wrapper {
    .tags-view-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 26px;
      line-height: 26px;
      border: 1px solid #d8dce5;
      color: #495060;
      background: #fff;
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
      margin-top: 4px;
    
      &.active {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        &::before {
          content: "";
          background: #fff;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          position: relative;
          margin-right: 2px;
        }
      }
      .el-icon-close {
        width: 16px;
        height: 16px;
        vertical-align: 2px;
        border-radius: 50%;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transform-origin: 100% 50%;
        &:before {
          transform: scale(0.6);
          display: inline-block;
          vertical-align: -3px;
        }
        &:hover {
          background-color: #b4bccc;
          color: #fff;
        }
      }
    }
  }
}
</style>

